<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>订单管理</title>
		<link href="plugin/date/date.css" rel="stylesheet">
		<link href="bootstrap/css/bootstrap3.min.css" rel="stylesheet">
		<link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
		<script src="js/jquery.min.js"></script>
		<link rel="stylesheet" href="css/nav.css" />
		<style>
			.form-group-update {
				margin-right: 2%;
			}
			.imgsBox  {display: inline-block; margin-right: 5px; margin-top: 5px;}
			.imgsBox img{ width: 100px;}
		</style>
	</head>
	<body>
		<!--导航-->
	    <nav class="navbar navbar-inverse">
	      <div class="container-fluid">
	        <div class="navbar-header">
	          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-2">
	            <span class="sr-only">Toggle navigation</span>
	            <span class="icon-bar"></span>
	            <span class="icon-bar"></span>
	            <span class="icon-bar"></span>
	          </button>
		          	<a class="navbar-brand" href=""><img src="images/admin_logo.png" alt=""></a>
	        </div>

	        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-2">
	          <ul class="nav navbar-nav" id="nav">

	          </ul>
	          <ul class="nav navbar-nav navbar-right">
	            <li class="dropdown">
	              <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">欢迎您：<span id="uname"></span><span class="caret"></span></a>
	              <ul class="dropdown-menu" role="menu">
	                <li><a href="change_pass.html">修改密码</a></li>
	                <li><a id="loginOut" href="#">退出登陆</a></li>
	              </ul>
	            </li>
	          </ul>
	        </div>
	      </div>
	    </nav>
		<div class="container-fluid">
			<div class="row bcert-box">
				<ol class="breadcrumb">
				  <li><a href="javascript:;">主页</a></li>
				  <li>订单管理</li>
				  <li class="active">订单管理</li>
				</ol>
				<form class="form-inline searchForm" action="" method="post" id="orderForm">
		          <div class="form-group">
		            <span class="theme-title">订单状态:</span>
		            <select class="form-control drop-down" name='orderStatus' id="orderStatus">
		              <option value="">全部</option>
		              <option value="1">待付款</option>
		              <option value="2">已付款(待发货)</option>
					  <option value="3">已发货(待收货)</option>
					  <option value="4">已收货</option>
					  <option value="5">待评价</option>
					  <option value="6">已评价</option>
					  <option value="7">取消订单</option>
					  <option value="8">退款</option>
					  <option value="10">延迟收货</option>
		            </select>
		          </div>
				  <div class="form-group">
		            <span class="theme-title">付款方式:</span>
		            <select class="form-control drop-down" name='paymentCode' id="paymentCode">
		              <option value="">全部</option>
		              <option value="1">支付宝</option>
		              <option value="2">金券</option>
					  <option value="3">物券</option>
					  <option value="4">银行卡</option>
					  <option value="5">微信</option>
		            </select>
		          </div>
		          <div class="form-group">
		              <input type="text" class="form-control" style="padding-left:12px;" name="orderSn" id="orderSn" placeholder="订单编号">
		          </div>
		          <div class="form-group">
		              <input type="text" class="form-control" style="padding-left:12px;" name="storeName" id="storeName" placeholder="店铺名称">
		          </div>
				  <div class="form-group">
		              <input type="text" class="form-control" style="padding-left:12px;" name="memberName" id="memberName" placeholder="买家名称">
		          </div>
		          <div class="form-group">
		              <input type="text" class="form-control" style="padding-left:12px;" name="startTime" title="错误"
		               readonly="readonly"
		               data-container="body"
		               data-toggle="popover"
		               data-placement="bottom"
		               data-content="开始时间不能大于结束时间!"
		               id="startTime" placeholder="开始时间">
		          </div>
		          <div class="form-group">
		              <input type="text" class="form-control" style="padding-left:12px;" readonly="readonly" name="endTime" id="endTime" placeholder="结束时间">
		          </div>
		          <div class="form-group">
		            <button type="button" class="btn btn-primary btn-success" id="Reset"></span>重置</button>
		            <button type="button" class="btn btn-primary btn-default" id="QueryBtn" data-toggle="button" aria-pressed="false" autocomplete="off">查询</button>
		            <button type="button" class="btn btn-primary btn-success" id="dlexcle"></span>&nbsp;导出excle</button>
					<!-- <button type="button" class="btn btn-primary btn-success addUser">新增会员</button> -->
		          </div>
		        </form>
				<div class="table">
		          	<table class="table table-bordered table-striped" id="integralList">

		          	</table>
		        </div>
				<!-- 分页 -->
		        <nav aria-label="...">
		            <div class="">
		            	<span id="pageNum">共&nbsp;<strong></strong>&nbsp;页&nbsp;/&nbsp;</span><span id="totalNum">&nbsp;<strong>0</strong>&nbsp;条数据</span>
		            </div>
		            <ul id="example"></ul>
		        </nav>
		    </div>
		</div>

		<div class="modal fade" tabindex="-1" id="editRole" role="dialog" aria-labelledby="">
			<div class="modal-dialog modal-lg" role="document">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span>
						</button>
							<h4 class="modal-title" id="myLargeModalLabel">详细</h4>
					</div>
					<div class="modal-body" id="orderInfo" style="overflow:auto">

					</div>
					<!-- <div class="modal-footer">
						<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
						<button type="button" class="btn btn-primary" id="entBtns">确认提交</button>
					</div> -->
				</div>
				<!-- /.modal-content -->
			</div>
			<!-- /.modal-dialog -->
		</div>
	</body>
</html>
<script type="text/javascript" src="plugin/layer/layer.js"></script>
<script type="text/javascript" src="js/cookie.js"></script>
<script type="text/javascript" src="js/common.js"></script>
<script type="text/javascript" src="js/ajax.js"></script>
 <script type="text/javascript" src="js/bootstrap-paginator.js"></script>
<script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="plugin/date/date.js"></script>
<script type="text/javascript" src="plugin/date/date.zh-CN.js"></script>
<script>
	$(document).ready(function() {
		tableList()
		$('#orderForm').attr('action', serverURL + '/export/orderList');
	});
	$('#QueryBtn').click(function(){
		tableList()
	})
	var pageUrls =  serverURL + '/query/orderList';
	var permissionsUrls  = ''
	//分页
    function tableList(){
  	  data = {
		  'orderSn':$('#orderSn').val(),
		  'storeName':$('#storeName').val(),
		  'orderStatus':$('#orderStatus').val(),
		  'memberName':$('#memberName').val(),
		  'paymentCode':$('#paymentCode').val(),
		  'startTime':$('#startTime').val(),
		  'endTime':$('#endTime').val(),
  		  'page': page,
  		  'pageSize': pagesize
  	  }
  	  data.page = 1
  	  ajax(
  		  pageUrls,
  		  data,
  		  pageNumList,
  		  'post',
  		  'json'
  	  )
    }
	//数据渲染
    function OpendList(res){
      var result = '';
      $('#integralList').empty();
      $('#integralList').append(
        '<tr>' +
        '<th>订单id</th>' +
        '<th>订单号</th>' +
		'<th>订单明细id</th>' +
		'<th>订单总额</th>' +
		'<th>订单状态</th>' +
		'<th>买家名称</th>' +
		'<th>店铺名称</th>' +
		'<th>支付方式</th>' +
		'<th>订单时间</th>' +
		'<th>操作</th>' +
    	'</tr>'
      );
		for (var i = 0; i < res.data.list.length; i++) {
			result +=
	           	'<tr>'+
	             '<td>'+ res.data.list[i].orderId +'</td>'+
	             '<td>'+ res.data.list[i].orderSn +'</td>'+
				 '<td>'+ res.data.list[i].orderDetailId +'</td>'+
	             '<td>'+ res.data.list[i].goodsAmount +'</td>'+
				 '<td>'+ res.data.list[i].orderDetailStatus +'</td>'+
				 '<td>'+ res.data.list[i].memberName +'</td>'+
				 '<td>'+ res.data.list[i].storeName +'</td>'+
				 '<td>'+ res.data.list[i].paymentName +'</td>'+
				 '<td>'+ res.data.list[i].orderTime +'</td>'+
				 '<td class="text-center"><button data-id="'+ res.data.list[i].orderDetailId +'" class="btn btn-primary btn-sm editRole">查看</button>&nbsp;&nbsp;'
				if (res.data.list[i].orderDetailStatus == '待付款') {
					result +='<button data-id="" onclick="cancelOrder('+ res.data.list[i].orderDetailId +',7)" class="btn btn-success btn-sm">取消订单</button>'
				}
		   		 result +='</td></td></tr>'
		}
      $('#integralList').append(result)
    }

	//详情
	$(document).on('click', '.editRole', function() {
		var id = $(this).attr('data-id')
		$('#editRole').modal();
		var data = {
			'orderDetailId':id
		}
		var cbk = function(res){
			$('#orderInfo').empty();
			var type = ''
			var isSpe =  res.data.isSpe
			isSpe ==  '0' ? type='金券' : type='物券';
			var html = '';
			html += '<table class="table table-bordered table-condensed tableCon layer-photos-demo">' +
    '                  <tbody>' +
    '                  <tr>' +
    '                      <th style="background-color: #f9f9f9;">订单编号：</th>' +
    '                      <td id="">' + res.data.orderSn + '</td>' +
    '                  </tr>' +
	'                  <tr>' +
	'                      <th style="background-color: #f9f9f9;">物券或金券：</th>' +
	'                      <td id="">' + type + '</td>' +
	'                  </tr>' +
    '                  <tr>' +
    '                      <th style="background-color: #f9f9f9;">订单总额：</th>' +
    '                      <td id="">' + res.data.goodsAmount + '</td>' +
    '                  </tr>' +
    '                  <tr>' +
    '                      <th style="background-color: #f9f9f9;">订单状态：</th>' +
    '                      <td id="">' + res.data.orderDetailStatus + '</td>' +
    '                  </tr>' +
    '                  <tr>' +
    '                      <th style="background-color: #f9f9f9;">买家：</th>' +
    '                      <td id="">' + res.data.memberName + '</td>' +
    '                  </tr>' +
    '                  <tr>' +
    '                      <th style="background-color: #f9f9f9;">实际支付额：</th>' +
    '                      <td id="">' + res.data.goodsPayPrice + '</td>' +
    '                  </tr>' +
    '                  <tr>' +
    '                      <th style="background-color: #f9f9f9;">收货人姓名：</th>' +
    '                      <td id="">' + res.data.reciverName + '</td>' +
    '                  </tr>' +
    '                  <tr>' +
    '                      <th style="background-color: #f9f9f9;">下单时间：</th>' +
    '                      <td id="">' + res.data.orderTime + '</td>' +
    '                  </tr>' +
    '                  <tr>' +
    '                      <th style="background-color: #f9f9f9;">电话号码：</th>' +
    '                      <td id="">' + res.data.phone + '</td>' +
    '                  </tr>' +
    '                  <tr>' +
    '                      <th style="background-color: #f9f9f9;">运费：</th>' +
    '                      <td id="">' + res.data.goodsFreight + '</td>' +
    '                  </tr>' +
    '                  <tr>' +
    '                      <th style="background-color: #f9f9f9;">单价：</th>' +
    '                      <td id="">' + res.data.goodsPrice + '</td>' +
    '                  </tr>' +
    '                  <tr>' +
    '                      <th style="background-color: #f9f9f9;">数量：</th>' +
    '                      <td id="">' + res.data.goodsQuantity + '</td>' +
    '                  </tr>' +
    '                  <tr>' +
    '                      <th style="background-color: #f9f9f9;">店铺：</th>' +
    '                      <td id="">' + res.data.storeName + '</td>' +
    '                  </tr>'+
	'                  <tr>' +
	'                      <th style="background-color: #f9f9f9;">详细地址：</th>' +
	'                      <td id="">' + res.data.addressName + '</td>' +
	'                  </tr>'+
	'                  <tr>' +
	'                      <th style="background-color: #f9f9f9;">购物券价格：</th>' +
	'                      <td id="">' + res.data.couponPrice + '</td>' +
	'                  </tr>'+
	'                  <tr>' +
	'                      <th style="background-color: #f9f9f9;">商品图片：</th>' +
	'                      <td id=""><div class="imgsBox"><img class="img-thumbnail" src="' + res.data.goodsImage + '" alt=""></div></td>' +
	'                  </tr>'+
	'                  <tr>' +
	'                      <th style="background-color: #f9f9f9;">查看商品：</th>' +
	'                      <td id=""><button type="button" onclick="window.open(\'goods_particulars.html?id='+res.data.goodsId+'\') " class="btn btn-sm btn-primary btn-lg">查看商品</button></td>' +
	'                  </tr>'+
    '</tbody></table>'
$('#orderInfo').append(html)
		}
		ajax(
			serverURL + '/query/getOrderDetailById',
			data,
			cbk,
			'post',
			'json'
		)
	})
	//取消订单
	function cancelOrder(id,str){
		layer.confirm('确定要取消订单吗？', {
			btn: ['确认','取消'] //按钮
		}, function(){
			var data = {
				'orderDetailId':id,
				'orderStatus':str
			}
			var cbk = function(res){
				tableList()
			}
			ajax(
				serverURL + '/update/orderStatus',
				data,
				cbk,
				'post',
				'json'
			)
		}, function(){
		});
	}

	$('#editRole').on('hidden.bs.modal', function (e) {
		$("#adminName").val('')
		$("#adminPassword").val('')
	})
	function compareDate(startTime, endTime) {
           return new Date(startTime).getTime() > new Date(endTime).getTime();
       }

       function checkStartAndEndTime() {
           if(compareDate($('#startTime').val(), $('#endTime').val())){
               $('#startTime').addClass("card-warning");
               $('#startTime').popover('show');

           }else{
               $('#startTime').removeClass("card-warning");
               $('#startTime').popover('hide')
           }
       }

       //时间选择
       $("#startTime").datetimepicker({
           format: "yyyy-mm-dd",
           autoclose: true,
           todayBtn: true,
           todayHighlight: true,
          //  endTime:new Date(),
           showMeridian: true,
           pickerPosition: "bottom-left",
           language: 'zh-CN',//中文，需要引用zh-CN.js包
           startView: 2,//月视图
           minView: 2,//日期时间选择器所能够提供的最精确的时间选择视图
       }).change(function () {
           checkStartAndEndTime();
       });
       $("#endTime").datetimepicker({
           format: "yyyy-mm-dd",
           autoclose: true,
           todayBtn: true,
           todayHighlight: true,
          //  endTime:new Date(),
           showMeridian: true,
           pickerPosition: "bottom-left",
           language: 'zh-CN',//中文，需要引用zh-CN.js包
           startView: 2,//月视图
           minView: 2,//日期时间选择器所能够提供的最精确的时间选择视图
       }).change(function () {
           checkStartAndEndTime();
       });

    $('#dlexcle').click(function(){
		$('#orderForm').submit();
	})
</script>
